.cm--item-block,
.colored-tile {
  max-width: 120px;
  height: 120px;
  border-radius: 16px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: relative;

  &.small {
    width: 64px;
    height: 64px;
    border-radius: 8px;
  }


  img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  &.block-green,
  &.tile-green {
    background-image: linear-gradient(322deg, #29C9B2, #B7DA46);
  }

  &.block-blue,
  &.tile-blue {
    background-image: linear-gradient(135deg, #53DDEC, #463D9D);
  }

  &.block-orange,
  &.tile-orange {
    background-image: linear-gradient(140deg, #FFC003, #F02B2B);
  }

  &.block-red,
  &.tile-red {
    background-image: linear-gradient(315deg, #EC4918, #E25D8D);
  }

  &.block-yellow,
  &.tile-yellow {
    background-image: linear-gradient(134deg, #FAD961, #F76B1C);
  }

  &.block-purple,
  &.tile-purple {
    background-image: linear-gradient(138deg, #AF84E3, #5071C7);
  }

  &.block-seaweed,
  &.tile-seaweed {
    background-image: linear-gradient(135deg, #13C4A5, #10A4B8);
  }

  &.tile-lime {
    background-image: linear-gradient(45deg, #5F8E3D 0%, #94BE46 100%);
  }
}
